<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport"/>
    <meta content="yes" name=" apple-mobile-web-app-capable"/>
    <meta content="no" name="apple-touch-fullscreen"/>
    <meta content="black" name=" apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <title>交易记录</title>
</head>
<body>
    <div class="daohanglan_box">
        <div class="title">
            <i class="icon iconfont icon-iconfontjiantou1"></i>
            <h4>交易记录</h4>
        </div>
    </div>
    <ul class="head_box2 flex">
        <li class="act flex-1">蓝积分</li>
        <li class="flex-1">绿积分</li>

    </ul>
    <div class="tabList whiteBg">
        <div class="clearfix">
            <div class="shixiang_box fl">日期</div>
            <div class="shixiang_box fl">事项</div>
            <div class="shixiang_box fl">数量</div>
            <div class="shixiang_box fl">积分</div>
        </div>
        <ul>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>

            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
        </ul>
    </div>
    <div class="tabList whiteBg">
        <div class="clearfix">
            <div class="shixiang_box fl">日期</div>
            <div class="shixiang_box fl">事项</div>
            <div class="shixiang_box fl">数量</div>
            <div class="shixiang_box fl">积分</div>
        </div>
        <ul>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
            <li class="clearfix">
                <div class="shixiang_box2">
                    <div class="shixiang_box1 fl">2017/06/12</div>
                    <div class="shixiang_box1 fl">回收旧报纸</div>
                    <div class="shixiang_box1 fl">1公斤</div>
                    <div class="shixiang_box1 fl">14积分</div>
                </div>
            </li>
        </ul>
    </div>
    <script type="text/javascript" src="js/main.js"></script>
    <script>
        $(function(){
            $(".tabList").eq(0).show();
            $(".head_box2").on("click", "li", function () {
                $(this).addClass('act').siblings().removeClass('act');
                var num = $(this).index();
                $(".tabList").eq(num).fadeIn().siblings(".tabList").fadeOut();
            });
        })
    </script>
</body>
</html>